<template>
  <div id="container">
    <div style="text-align:center;">
      <h3>班级课程添加</h3>
      <hr />
    </div>

    <div id="ruleForm" style="margin:auto;text-align:center;width:80%">
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        inline-message
        class="demo-ruleForm"
      >
        <el-form-item prop="semester">
          <span>学期：</span>
          <el-button
            @click="openSemesterList = true"
            type="text"
            style="width: 200px; text-align: left;"
          >
            <span v-if="ruleForm.semester">{{ruleForm.semester.name}}</span>
            <span v-else>未选择</span>
          </el-button>
        </el-form-item>
        <el-form-item prop="class">
          <span>班级：</span>
          <el-button
            @click="openClassList = true"
            type="text"
            style="width: 200px; text-align: left;"
          >
            <span v-if="ruleForm.class">{{ruleForm.class.name}}</span>
            <span v-else>未选择</span>
          </el-button>
        </el-form-item>
        <el-form-item prop="course">
          <span>课程：</span>
          <el-button
            @click="openCourseList = true"
            type="text"
            style="width: 200px; text-align: left;"
          >
            <span v-if="ruleForm.course">{{ruleForm.course.name}}</span>
            <span v-else>未选择</span>
          </el-button>
        </el-form-item>
        <el-form-item>
          <span style="width:80%;text-align:center;">
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button type="primary" @click="resetForm('ruleForm')">重置</el-button>
          </span>
        </el-form-item>
      </el-form>
    </div>
    <!-- 学期筛选 -->
    <el-dialog title="选择学期" :visible.sync="openSemesterList">
      <el-input placeholder="请输入关键字" v-model="semesterKeyword">
        <template slot="prepend">学期名称</template>
        <el-button slot="append" icon="el-icon-search" @click="getSemesterByKeyword"></el-button>
      </el-input>
      <br />
      <br />
      <el-radio-group v-model="semesterSelect">
        <el-radio
          v-for="(semester,index) in semesterList"
          :label="semester"
          :key="'classCourse'+index"
        >{{semester.name}}</el-radio>
      </el-radio-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="semesterSelect = ''">清 空</el-button>
        <el-button type="primary" @click="semesterSelected">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 班级筛选 -->
    <el-dialog title="选择班级" :visible.sync="openClassList">
      <el-input placeholder="请输入关键字" v-model="classKeyword">
        <template slot="prepend">班级名称</template>
        <el-button slot="append" icon="el-icon-search" @click="getClassBykeyword"></el-button>
      </el-input>
      <br />
      <br />
      <el-radio-group v-model="classSelect">
        <el-radio
          v-for="(_class,index) in classList"
          :label="_class"
          :key="'_class'+index"
        >{{_class.name}}</el-radio>
      </el-radio-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="classSelect = ''">清 空</el-button>
        <el-button type="primary" @click="classSelected">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 课程筛选 -->
    <el-dialog title="选择课程" :visible.sync="openCourseList">
      <el-input placeholder="请输入关键字" v-model="courseKeyword">
        <template slot="prepend">课程名</template>
        <el-button slot="append" icon="el-icon-search" @click="getCourseByKeyword"></el-button>
      </el-input>
      <br />
      <br />
      <el-radio-group v-model="courseSelect">
        <el-radio
          v-for="(course, index) in courseList"
          :key="'course'+index"
          :label="course"
        >{{course.name}}</el-radio>
      </el-radio-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="courseSelect = ''">清 空</el-button>
        <el-button type="primary" @click="courseSelected">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getAllSemester } from "@/api/semester";
import { getAllInstructionClass } from "@/api/instructionClass";
import { getAllCourse } from "@/api/course";

export default {
  name: "teachingIntention_add",
  data() {
    return {
      ruleForm: {
        semester: "", //当前学期
        class: "", //班级
        course: "" //课程
      },
      rules: {
        semester: [{ required: true, message: "请选择学期", trigger: "blur" }],
        class: [{ required: true, message: "请选择班级", trigger: "blur" }],
        course: [{ required: true, message: "请选择课程", trigger: "blur" }]
      },

      // 课程
      openCourseList: false,
      courseKeyword: "",
      courseList: [],
      courseSelect: "",

      //学期
      openSemesterList: false,
      semesterKeyword: "",
      semesterList: [],
      semesterSelect: "",

      //班级
      openClassList: false,
      classKeyword: "",
      classList: [],
      classSelect: ""
    };
  },
  created() {
    //获取学期列表
    this.getAllSemester();
    //获取课程列表
    this.getAllCourse();
    //获取班级列表
    this.getAllClass();
  },
  methods: {
    // 获取学期列表
    getAllSemester() {
      getAllSemester().then(res => {
        this.semesterList = res.data.semesterList;
      });
    },

    //获取课程列表
    getAllCourse() {
      getAllCourse().then(res => {
        this.courseList = res.data.courseList;
      });
    },

    //获取班级列表
    getAllClass() {
      getAllInstructionClass().then(res => {
        this.classList = res.data.instructionClassList;
      });
    },

    //根据关键词搜索学期
    getSemesterByKeyword() {},

    //根据关键词搜索班级
    getClassBykeyword() {},

    //根据关键词搜索课程
    getCourseByKeyword() {},

    //确定选择的学期
    semesterSelected() {
      this.ruleForm.semester = this.semesterSelect;
      this.openSemesterList = false;
    },

    //确定选择的班级
    classSelected() {
      this.ruleForm.class = this.classSelect;
      this.openClassList = false;
    },

    //确定选择的课程
    courseSelected() {
      this.ruleForm.course = this.courseSelect;
      this.openCourseList = false;
    },

    //教师授课意向表表单提交
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //表单重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style scoped>
#container {
  width: 80%;
  margin: auto;
  font-size: 20px;
}
span {
  display: inline-block;
  width: 150px;
  font-size: 20px;
  text-align: right;
}
#ruleForm .el-form-item {
  /* display: inline-block;
  text-align: center; */
  height: 50px;
  line-height: 50px;
}
#ruleForm .el-form-item .el-input {
  width: 400px;
  text-align: left;
  height: 50px;
  line-height: 50px;
}
.el-button span {
  text-align: left;
}
</style>
